$(function() {
  // 首页渲染
  var pageSize = 4;
  var currentPage = 1;
  function render() {
    $.ajax({
      type: "get",
      url: "/category/querySecondCategoryPaging",
      data: {
        pageSize: pageSize,
        page: currentPage
      },
      dataType: "json",
      success: function(res) {
        //成功的回调函数
        console.log(res);
        // 组合，渲染
        $("tbody").html(template("tmp", res));
        setPage(res.total);
      }
    });
  }
  render();

  // 分页
  function setPage(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage, //当前页
      totalPages: Math.ceil(total / pageSize), //总页数
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值
        currentPage = page; //改变当前页的值
        // 重新渲染
        render();
      }
    });
  }

  // 动态填充一级下拉列表
  $.ajax({
    type: "get",
    url: "/category/queryTopCategoryPaging",
    data: {
      page: 1,
      pageSize: 100
    },
    dataType: "json",
    success: function(res) {
      console.log(res);
      // 组合渲染
      $(".cate-one").html(template("tmp-one", res));
    }
  });

  // 下拉框选中的效果
  $(".cate-one").on("click", "a", function() {
    // 把下拉列表的值付给按钮
    $(".cate-title").text($(this).text());
    // 把模板中的id赋值给隐藏的input
    $("#categoryId").val($(this).data("id"));
    // 为什么选的是.add-form呢
    // 手动恢复下拉框状态
    $(".add-form")
      .data("bootstrapValidator")
      .updateStatus("categoryId", "VALID");
  });

  // 上传图片(看jquery-fileupload文档)
  $("#file").fileupload({
    dataType: "json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done: function(e, data) {
      console.log(data.result.picAddr);
      // 把上传的图片地址赋给图片，做预览效果
      var url = data.result.picAddr;
      $("#img").attr("src", url);
      // 把图片的地址存到隐藏域中
      $("#brandLogo").val(url);
      // 手动恢复图片的状态
      $(".add-form")
        .data("bootstrapValidator")
        .updateStatus("brandLogo", "VALID");
    }
  });

  // 表单校验
  //使用表单校验插件
  $(".add-form").bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [":disabled"],

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: "glyphicon glyphicon-ok",
      invalid: "glyphicon glyphicon-remove",
      validating: "glyphicon glyphicon-refresh"
    },

    //3. 指定校验字段
    fields: {
      //校验用户名，对应name表单的name属性
      categoryId: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请选择一级分类"
          }
        }
      },
      brandName: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请选择二级分类"
          }
        }
      },
      brandLogo: {
        validators: {
          //不能为空
          notEmpty: {
            message: "请上传图片"
          }
        }
      }
    }
  });

  // 手动恢复下拉列表和图片的校验状态
  //     1- 在下拉列表选中后， 手动恢复下拉列表的校验状态
  //     2- 在图片上传完成后， 恢复图片的校验状态

  // 点击添加按钮，在表单数据合理的情况下，向后台发送请求，进行添加。
  // 前端页面重新渲染，隐藏模态框，表单重置
  $(".add-form").on("success.form.bv", function(e) {
    e.preventDefault();
    //使用ajax提交逻辑
    $.ajax({
      type: "post",
      url: "/category/addSecondCategory",
      data: $(".add-form").serialize(),
      dataType: "json",
      success: function(res) {
        //成功的回调函数
        console.log(res);
        // 页面重新渲染
        render();
        // 隐藏模态框
        $(".modal-add").modal("hide");
        // 表单重置
        $(".add-form")
          .data("bootstrapValidator")
          .resetForm(true);
        // 手动重置下拉菜单和图片
        $(".cate-title").text("请选择一级分类");
        $("#img").attr("src", "./images/none.png");
      }
    });
  });
});
